<template>
  <div ref="feelChatPage">
    <div ref="feelChat" style="width:425px;height:260px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { trainOverviewOption } from '../../../../../../utils/js/point'
export default {
  props: {
    trainChartData:{
      default: ()=>{}
    },
    dataColor: {
      default: 'rgba(66,120,252,1)'
    }
  },
  data() {
    return {
      allData: [],
      xAxisData: null,
    }
  },
  mounted() {
    this.updatechart();
  },
  methods: {
    updatechart() {
      trainOverviewOption.title[0].text = '训练精度';
      let len = this.trainChartData.dataLength;
      trainOverviewOption.title[1].text = this.trainChartData.trainPrecision[len-1] + '%';
      trainOverviewOption.xAxis.data = this.trainChartData.trainTimes;
      trainOverviewOption.series[0].data = this.trainChartData.trainPrecision;
      trainOverviewOption.series[0].itemStyle.color = this.dataColor;
      let colorTemp = this.dataColor.split(',').slice(0,3).join(',');
      trainOverviewOption.series[0].areaStyle.color.colorStops[0].color = colorTemp + ',0.4)';
      trainOverviewOption.series[0].areaStyle.color.colorStops[1].color = colorTemp +',0)';
      var myChart = echarts.init(this.$refs.feelChat);
      myChart.setOption(trainOverviewOption);
      //  echart图表自适应
      window.addEventListener('resize', function() {
        myChart.resize();
      });
    }
  }
}
</script>